import { Card,Timeline} from 'antd'
import React from 'react'
import './MileagePortal.less'

const MileagePortal = ({ loading ,day}) => {

  const setCardExtra = () => (<>今天是您入职的第<a style={{color: 'red'}}>{day}</a>天！</>);

  const data = [
    {label:'入职',title:'2020年6月6日',text:''},
    {label:'转正',title:'恭喜你2020年6月26日成为彰泰正式员工',text:'如果你不握紧拳头，你就不知道你的力量到底有多大；如果你不咬紧牙关，你就不知道你的坚持到底有多狠；最强悍的竞争力只有两个字：行动！'},
    {label:'周年',title:'',text:''},
    {label:'晋升',title:'2020年6月6日',text:''},
  ];

  return (
    <Card loading={loading} title="我的里程" className='mileage-portal-card' extra={setCardExtra()}>
      <Timeline mode='left'>
        {
          data.map((item, index) => {
              return  <Timeline.Item label={item.label} className='mileage-portal title-font'>
                <p className='title-p-font'>{item.title}</p>
                <p className='title-p-two-font'>{item.text}</p>
              </Timeline.Item>
          })
        }
      </Timeline>
  </Card>
  )

};


export default MileagePortal
